<template>
  <div class="body">
    <label id="title">报价信息</label>
    <form id="form1">
      <div class="form-item">
        <label>供应数量(万吨)：<input ref="supplyQuantity" type="number" disabled></label>
        <label>热值 (KCal/kg)≥：<input ref="calorificValue" type="number" disabled></label>
        <label>原煤单价(元/吨)：<input ref="unitPrice" type="number" disabled></label>
      </div>
      <div class="form-item">
        <label id="item-label1">全硫(%)：<input ref="sulfur" type="number" disabled></label>
        <label id="item-label2">产地：
          <input ref="placeOrigin" onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')"
                 maxlength="32" disabled></label>
        <label id="item-label3">运费单价：<input class="sminput" ref="freightUnitPrice" type="number" disabled></label>
        <label style="color: red">{{sumData}}</label><label>元/吨</label>
      </div>
      <div class="form-item">
        <label id="item-label4">挥发分(%)：<input ref="volatitleMatterDown" class="sminput" type="number" disabled>
          <label>至<input ref="volatitleMatterUp" class="sminput" type="number" disabled></label></label>
        <label id="item-label5">发站(发货港口)：
          <input ref="port" onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')"
                 maxlength="32" disabled></label>
      </div>
      <div class="form-item">
        <label>空干基灰分(%)≤：<input ref="ashContent" type="number" disabled></label>
        <label id="item-label6">全水分(%)≤：<input ref="waterContent" type="number" disabled></label>
        <input hidden ref="id">
      </div>
      <div class="form-item">
        <button class="item-button" v-on:click="submitForm" onclick="javascrpit:void(0)">摘牌</button>
        <button class="item-button">返回</button>

      </div>
    </form>
  </div>
</template>

<script>
    import axios from 'axios'
    import Common from '@/components/common/Common'
    export default {
        name: 'PropBuyer',
        data() {
            return {
                sumData: ''
            }
        },
        mounted: function () {
            this.$refs.id.value = 21;//此处应修改为页面加载时，传递进来的牌子id
            this.loadProp();
        },
        methods: {
            submitForm() {
                axios.post(Common.API+'prop/updateProp', {
                    id: this.$refs.id.value
                })
                    .then(Response => {
                        if ("SUCCESS" === Response.data) {
                            alert("摘牌成功");//此处需修改为跳转至缴纳保证金界面
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },
            loadProp() {
                axios.get(Common.API+'prop/getProp?id=' + this.$refs.id.value)
                    .then(Response => {
                        this.$refs.id.value = Response.data.data.id;
                        this.$refs.supplyQuantity.value = Response.data.data.supplyQuantity;
                        this.$refs.calorificValue.value = Response.data.data.calorificValue;
                        this.$refs.unitPrice.value = Response.data.data.unitPrice;
                        this.$refs.sulfur.value = Response.data.data.sulfur;
                        this.$refs.placeOrigin.value = Response.data.data.placeOrigin;
                        this.$refs.freightUnitPrice.value = Response.data.data.freightUnitPrice;
                        this.$refs.volatitleMatterDown.value = Response.data.data.volatitleMatterDown;
                        this.$refs.volatitleMatterUp.value = Response.data.data.volatitleMatterUp;
                        this.$refs.port.value = Response.data.data.port;
                        this.$refs.ashContent.value = Response.data.data.ashContent;
                        this.$refs.waterContent.value = Response.data.data.waterContent;
                        this.sumData = parseFloat(this.$refs.calorificValue.value) + parseFloat(this.$refs.freightUnitPrice.value);
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  #title {
    background: #0066cc;
    color: #FFF;
    padding: 5px 40px;
    position: absolute;
    left: 10%;
  }

  #form1 {
    border-left: 1px #b9b9b9 solid;
    border-top: #0066cc 2px solid;
    position: absolute;
    top: 30px;
    width: 960px;
    height: 215px;
    left: 10%;
    font-weight: bold;
  }

  .body {
    width: 80%;
    position: relative;
  }

  .form-item {
    position: relative;
    border-bottom: #b9b9b9 1px dashed;
    padding: 10px 0;
  }

  .form-item > label {
    width: 320px;
  }

  #item-label1 {
    margin-left: 50px;
    margin-right: 5px;
  }

  #item-label2 {
    margin-left: 87px;
    margin-right: 5px;
  }

  #item-label3 {
    margin-left: 41px;
  }

  #item-label4 {
    margin-left: 34px;
  }

  #item-label5 {
    margin-left: 80px;
    margin-right: 320px;
  }

  #item-label6 {
    margin-left: 26px;
    margin-right: 310px;
  }

  .sminput {
    width: 40px;
  }

  .item-button {
    margin-right: 20px;
    width: 100px;
    position: relative;
    left: 40%;
  }

  .form-item > p {
    text-align: left;
    color: #ff232d;
  }
</style>

